<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%;">
              <div class="operation-list">
                  <div style="float:right;margin-right:5px">
                      <el-button icon="el-icon-search" type="primary" @click="btnQuery" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
                      <el-button icon="el-icon-plus" @click="MainOpenDialog(1)" v-has="'PADD'" :disabled="changeflag">新增</el-button>
                      <el-button icon="el-icon-document" @click="SaveRecord" v-has="'PDELETE'" :disabled="!changeflag">保存</el-button>
                      <el-button icon="el-icon-close" @click="MainOpenDialog(4)" v-has="'PDELETE'" :disabled="!changeflag">取消</el-button>
                      <el-button icon="el-icon-delete" @click="MainOpenDialog(3)" v-has="'PDELETE'" :disabled="changeflag">删除</el-button>
                      <!-- <el-button icon="el-icon-download" @click="ExportCsv()" v-has="'PEXPORT'">导出</el-button> -->
                  </div>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <div ref="xTableDiv" style="height:100%">
                  <vxe-table :data.sync="Data.leftData" :loading="loadingmain" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" @current-change="currentChangeEvent">
                      <vxe-table-column field="recieveaddr" sortable title="签收区域编号" width="80" show-overflow align="center"></vxe-table-column>
                      <vxe-table-column field="areaname" sortable title="区域名称" width="110" show-overflow header-align="center"></vxe-table-column>
                      <vxe-table-column field="description" sortable title="备注" width="260" show-overflow header-align="center"></vxe-table-column>
                  </vxe-table>
              </div>
          </div>
          <div class="middle-right">
              <rm-layout-top splitcolor="#ffffff" :splitwidth=5 :fixsize=100 :canDrag=false>
                  <template v-slot:fix>
                      <div style="height:100px;border:1px solid #CCC">
                          <div style="float:left;width:100%;height:100%;">
                              <el-form label-width="auto" :model="RecieveArea" :disabled="isedit">
                                  <table class="formtablestyle">
                                      <tr>
                                          <td width="85px">
                                              签收区域编号
                                          </td>
                                          <td width="120px">
                                              <el-input v-model="RecieveArea.recieveaddr" disabled></el-input>
                                          </td>
                                          <td>
                                              区域名称
                                          </td>
                                          <td>
                                              <el-input v-model="RecieveArea.areaname" ref="input0" @keyup.enter.native="nextFocus(0)" @input="hasChange"></el-input>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              备注
                                          </td>
                                          <td colspan="3">
                                              <el-input v-model="RecieveArea.description" :rows="3" type="textarea" ref="input1" @keyup.enter.native="nextFocus(1)" @input="hasChange"></el-input>
                                          </td>
                                      </tr>
                                  </table>
                              </el-form>
                          </div>
                      </div>
                  </template>
                  <div style="height:100%;">
                      <div style="height:100%;">
                          <div style="height:100%" :key="keyid">
                              <vxe-table :data="Data.rightData2" :loading="LoadingDetail" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false,activeMethod:activeMethod}" border fit height="auto" header-align="center" ref="rxTable2" resizable show-header-overflow="tooltip" show-overflow size="mini" stripe highlight-current-row>
                                  <vxe-table-column field="seq" title="序号" width="50" align="center" :edit-render="{name: 'input', autoselect: true ,events: { change: hasChange}}"></vxe-table-column>
                                  <vxe-table-column field="rptunitid" title="报告单元" width="200" align="center" header-align="center">
                                      <template v-slot="{row}">
                                          <rm-ddl-rptunit v-model="row.rptunitid" width="200px" @change="rptunitChange" key="rptunitid"></rm-ddl-rptunit>
                                      </template>
                                  </vxe-table-column>
                                  <template v-slot:fix>
                                      <div style="font-size:17px;padding:3px;background-color:#fff;overflow:auto;text-align:center">
                                          <el-button @click="rxTableAddEvent()" class="btnclass">新增明细</el-button>
                                          <el-button @click="rxTableDeleteEvent(2)" class="btnclass">删除明细</el-button>
                                      </div>
                                  </template>
                              </vxe-table>
                          </div>
                      </div>
                  </div>
              </rm-layout-top>
          </div>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "MNG251",
  data() {
      return {
          ModData: [],
          AddData: [],
          utype: this.$tool.getSession(this.$tool.loginutype),
          hospcode: this.$tool.getSession(this.$tool.selectedhis),
          keyConfig: {
              isEdit: true,
          },
          keyLocalConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
          },
          selectConfig: {
              reserve: true,
          },
          changeflag: false,
          focusIndex: 0,
          keyid: 0,
          selrow: {},
          operatetype: "2",
          searchObj: { txtsearch: "" },
          LoadingDetail: false,
          loadingmain: false,
          RecieveArea: { recieveaddr: "", areaname: "", description: "" },
          Data: { leftData: [], rightData2: [] },
      };
  },
  created() {
      this.initPage();
  },
  computed: {
      isedit() {
          if (this.$refs.xTable.tableData.length == 0 && this.operatetype != "1") {
              return true;
          } else {
              return false;
          }
      },
  },
  mounted() { },
  updated() { },
  methods: {
      btnQuery() {
          this.AddData = [];
          this.ModData = [];
          this.initPage();
      },
      //主表初始化
      initPage() {
          var that = this;
          that.loadingmain = true;
          that.$tool
              .request({
                  url: "MNG/MNG2/MNG251",
                  method: "post",
                  data: {
                      action: "initPage",
                  },
              })
              .then((res) => {
                  that.loadingmain = false;

                  if (res.data.length > 0) {
                      that.Data.leftData = res.data; //主表赋值
                      that.selrow = res.data[0];
                      that.$refs.xTable.setCurrentRow(that.selrow);
                      that.queryRight();
                  } else {
                      that.selrow.recieveaddr = "";
                      that.RecieveArea = {};
                      that.Data.leftData = [];
                      that.Data.rightData2 = [];
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      //明细查询
      queryRight() {
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG251",
                  method: "post",
                  data: {
                      action: "queryRight",
                      recieveaddr: this.selrow.recieveaddr,
                  },
              })
              .then((res) => {
                  this.RecieveArea = res.data0[0];
                  this.Data.rightData2 = res.data;
              });
      },
      currentChangeEvent({ row, column }) {
          if (this.changeflag) {
              this.$refs.xTable.setCurrentRow(this.selrow);
          } else {
              this.operatetype = "2";
              this.selrow = row;
              this.queryRight();
          }
      },
      hasChange() {
          this.changeflag = true;
      },
      activeMethod({ row, column }) {
          if (column.property == "windowno") {
              if (row.addflag == "1") return true;
              else return false;
          } else {
              return true;
          }
      },
      // 回车切换输入框
      nextFocus(index) {
          if (index > 3) return false;
          var that = this;
          var focusIndex = index + 1;
          setTimeout(function () {
              that.$refs["input" + focusIndex].focus();
          }, 1);
      },
      MainOpenDialog(k) {
          if (k == 1) {
              //新增
              this.RecieveArea = {
                  recieveaddr: "",
                  areaname: "",
                  description: "",
              };
              this.Data.rightData2 = [];
              this.operatetype = "1";
              this.$refs.input0.focus();
              this.hasChange();
          } else if (k == 4) {
              //取消
              this.changeflag = false;
              this.operatetype = "2";
              //空数据时不查询右侧表格
              if (this.Data.leftData.length == 0) {
                  this.RecieveArea = {};
                  this.Data.rightData2 = [];
              } else {
                  this.queryRight();
              }
          } else {
              // 删除
              this.$confirm(
                  "您确定这条数据吗？",
                  {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                  },
                  "提示"
              )
                  .then(() => {
                      this.ConfirmDel();
                  })
                  .catch(() => { });
          }
      },
      // 确认删除
      ConfirmDel() {
          this.operatetype = "3";
          this.SaveRecord();
      },
      //主表及明细操作保存
      SaveRecord() {
          let data = this.$refs.rxTable2.tableData;
          this.$pub.ResetSeq(data, "seq");
          let that = this;
          that.$tool
              .request({
                  url: "MNG/MNG2/MNG251",
                  method: "post",
                  data: {
                      action: "SaveRecord",
                      utype: that.operatetype,
                      saveinfo: that.RecieveArea,
                      oldinfo: that.selrow,
                      urec2: that.$refs.rxTable2.getRecordset(),
                  },
              })
              .then((res) => {
                  if (res.errcode == "1") {
                      that.changeflag = false;
                      // that.queryRight();
                      that.$pub.message(that, "操作成功！", "success");
                      if (that.operatetype == "1") {
                          if (that.AddData.indexOf(res.keyid) == -1) {
                              that.AddData.push(res.keyid);
                          }
                          that.$refs.xTable.insert(res.data[0]).then(({ row }) => {
                              that.selrow = row;
                              that.setHightLightRow();
                              that.queryRight();
                          });
                          that.operatetype = 2;
                      } else if (that.operatetype == "2") {
                          if (that.ModData.indexOf(res.keyid) < 0) {
                              that.ModData.push(res.keyid);
                          }
                          that.updateTableCurrentRow(res.data[0]);
                          that.queryRight();
                      } else {
                          let row = this.$table.DelRecordSelect(this.$refs.xTable, -1, this);
                          if (!!row) {
                              that.selrow = row;
                              that.setHightLightRow();
                              that.queryRight();
                          } else {
                              this.RecieveArea = {};
                              this.Data.rightData2 = [];
                          }
                      }
                      that.operatetype = "2"
                  } else {
                      that.$alert("操作失败！" + res.errmsg, "提示");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      updateTableCurrentRow(obj) {
          this.selrow.recieveaddr = obj.recieveaddr;
          this.selrow.areaname = obj.areaname;
          this.selrow.description = obj.description;
          this.$refs.xTable.updateListenter();
          this.setHightLightRow();
      }, //修改或新增后选中行
      setHightLightRow() {
          let row = this.$refs.xTable.getTableData().fullData.find((m) => m.recieveaddr == this.selrow.recieveaddr);
          if (!!row) {
              setTimeout(() => {
                  this.$refs.xTable.scrollToRow(row);
                  this.$refs.xTable.setCurrentRow(row);
              }, 10);
          }
      },
      rxTableAddEvent() {
          if (this.isedit) return false;

          let data = this.$refs.rxTable2.tableData;
          this.$refs.rxTable2.insert({ recieveaddr: this.RecieveArea.recieveaddr, rptunitid: "", seq: (data.length + 1) * 10 }).then(({ row }) => {
              this.$nextTick(() => {
                  this.$refs.rxTable2.setCurrentRow(row);
                  this.$refs.rxTable2.setActiveRow(row);
              });
          });

          this.hasChange();
      },
      rxTableDeleteEvent() {
          if (this.isedit) return false;
          if(!this.$refs.rxTable2.getCurrentRow()) {
              this.$alert("请先选中待删除的明细！");
              return;
          }
          let row = this.$table.DelRecordSelect(this.$refs.rxTable2, -1, this);
          this.$nextTick(() => {
              this.$refs.rxTable2.setCurrentRow(row);
          });

          this.hasChange();
      },
      rptunitChange(code, name) {
          this.hasChange();
      },
      handleTabClick(tab, event) {
          this.keyid++;
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  overflow-x: auto;
  word-wrap: none;
  z-index: 99;
}
.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: hidden;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 655px;
  overflow: hidden;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 650px;
  right: 0px;
}
.middle-right-mask {
  position: absolute;
  height: 100%;
  width: 650px;
  right: 0px;
  background: #ffffff;
  opacity: 0.5;
  z-index: 999;
}

.formtablestyle {
  height: 100%;
  font-size: 12px;
  color: #333;
  width: 100%;
}
.formtablestyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5) {
  text-align: right;
}
.popTableStyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  text-align: right;
}
::v-deep .middle-right .formtablestyle tr td div .el-input__inner {
  /*border: 1px solid #ffffff !important;
   padding: 0px !important;*/
  color: #000000;
}
::v-deep .el-color-picker--small .el-color-picker__trigger {
  width: 100% !important;
  height: 24px !important;
  padding: 0px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #000000;
}
::v-deep  .mytable-style.vxe-table .vxe-body--column.col-orange {
  background-color: #f8f8f8;
}
::v-deep  .middle-center .vxe-table .vxe-cell {
  padding: 0px;
}
::v-deep  .xTable1Class .vxe-table .vxe-cell {
  padding: 0px;
}
::v-deep  .middle-center tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep  .middle-center tr.vxe-body--row.row-modify {
  color: blue !important;
}
::v-deep  .middle-right .el-radio {
  margin-right: 5px;
}
::v-deep  .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
::v-deep  .note-text .el-textarea__inner {
  padding: 5px !important;
}
::v-deep  .btnclass {
  background-color: #e6e6e6;
  color: black;
}
</style>
